<template>
	<div class="test-page">
		<a-card title="试题页面" style="width: 100%;">
			<a-collapse v-model:activeKey="activeKeys">
				<a-collapse-panel key="1" header="文章与问题">
					<div v-for="(section, sectionIndex) in sections" :key="sectionIndex" style="margin-bottom: 20px;">
						<h3>文章 {{ sectionIndex + 1 }}</h3>
						<p>{{ section.article.content }}</p>
						<h4>问题 {{ sectionIndex + 1 }}</h4>
						<a-radio-group v-model:value="selectedAnswers[sectionIndex]" @change="checkAnswer(sectionIndex)">
							<div v-for="(question, questionIndex) in section.questions" :key="questionIndex" style="margin-bottom: 10px;">
								<a-radio :value="String.fromCharCode(65 + questionIndex)">
									{{ question.question }}
								</a-radio>
								<div v-for="(option, optionIndex) in question.options" :key="optionIndex" style="margin-left: 20px;">
									<a-radio :value="String.fromCharCode(65 + optionIndex)">
										{{ String.fromCharCode(65 + optionIndex) }}. {{ option }}
									</a-radio>
								</div>
							</div>
						</a-radio-group>
						<div v-if="showCorrectAnswers[sectionIndex]">
							<p>正确答案: {{ section.questions[0].correctAnswer }}</p>
						</div>
					</div>
				</a-collapse-panel>
			</a-collapse>
		</a-card>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const sections = ref([]);
const selectedAnswers = ref([]);
const showCorrectAnswers = ref([]);

// 获取试题列表
const fetchTests = async () => {
	try {
		const response = await axios.post('/biz/Englishword/wordToArticleAndQuestions', {
			words: ['words_0cd39191f4ba'],
			articleNumber: 2
		});
		sections.value = response.data.data;
		selectedAnswers.value = new Array(sections.value.length).fill('');
		showCorrectAnswers.value = new Array(sections.value.length).fill(false);
	} catch (error) {
		console.error('Failed to fetch tests:', error);
	}
};

// 检查答案
const checkAnswer = (index) => {
	showCorrectAnswers.value[index] = true;
};

// 初始化时获取试题列表
onMounted(() => {
	fetchTests();
});
</script>

<style scoped>
.test-page {
	padding: 20px;
}

.ant-card {
	background-color: #f7f7f7;
}

.ant-collapse-header {
	font-weight: bold;
}

.ant-collapse-content-box {
	padding: 10px;
}

.ant-radio-group {
	display: flex;
	flex-direction: column;
}

.ant-radio-button-wrapper {
	margin-bottom: 5px;
}

.ant-collapse-item {
	margin-bottom: 20px;
}

.ant-collapse-item:last-child {
	margin-bottom: 0;
}

.ant-collapse-header {
	font-size: 1.2em;
	border-bottom: 1px solid #e8e8e8;
}

.ant-collapse-content-box {
	background-color: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	padding: 10px;
}
</style>
